<template>
    <div class="maindataDepartment">
      <el-row class="one_row">
        <el-form :model="requestParam"
                 label-width="140px">
          <el-col :span="6">
            <el-form-item label="部门主编码">
              <el-input v-model="requestParam.CODE"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="部门名称">
              <el-input v-model="requestParam.DESC1"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="上级部门名称">
              <el-input v-model="requestParam.DESC3"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="所属组织名称">
              <el-input v-model="requestParam.DESC5"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row  class="two_row">
        <el-form :model="requestParam"
                 label-width="140px">
          <el-col :span="6" class="time">
              <el-form-item label="同步时间">
                  <el-date-picker
                is-range
                v-model="requestParam.timeValue"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-date-picker>
            </el-form-item>
          </el-col>      
        </el-form>
      </el-row>
      <el-row class="three_row">
        <el-col :span="6">
            <div>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
          </div>
      </el-col>
      </el-row>
      <el-table :highlight-current-row="true"
                border
                :header-cell-style="{ background: '#f5f5f5' }"
                :data="tableData.list"

                height="610px">
        <el-table-column prop="serial_number"
                         label="序号"
                         align="center"
                         width="100px"
                         type="index"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="CODE"
                         label="部门主编码"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC1"
                         label="部门名称"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC3"
                         label="上级部门名称"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC4"
                         label="所属组织编码"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC5"
                         label="所属组织名称"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="RECORDERCODE"
                         label="创建人"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="RECORDTIME"
                         label="创建时间"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="create_at"
                         label="同步时间"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作"
                       width="200px"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="details(scope.row)">详情</el-button>
        </template>
      </el-table-column>
      </el-table>
      <el-pagination @current-change="handlePageChange"
                     @size-change="handleSizeChange"
                     :current-page="requestParam.page"
                     :page-size="requestParam.page_size"
                     layout="total,sizes,prev, pager, next, jumper"
                     background
                     :total="tableData.total_count"
                     align="center">
      </el-pagination>
    </div>
  </template>
  
  <script>
  import { BulkManageApi } from "@/services/ResourceCentre";
  export default {
    components: {
  
    },
    data () {
      return {
        requestParam: {
          CODE:'',
          DESC1:'',
          DESC3:'',
          DESC5:'',
          is_page: 1,
          page: 1,
          page_size: 10,        
          timeValue: '',
          start_date:'',
          end_date:'',
        },
        resetParam: {
          CODE:'',
          DESC1:'',
          DESC3:'',
          DESC5:'',
          is_page: 1,
          page: 1,
          page_size: 10,        
          timeValue: '',
          start_date:'',
          end_date:'',
        },
        tableData: {
          list: [],
          page: 1,
          total_count: 0
        }
      };
    },
    methods: {
      // 查询
      search () {
        this.requestParam.page = 1
        this.getData()
      },
      // 重置
      reset () {
        let resetParam = JSON.parse(JSON.stringify(this.resetParam));
        this.requestParam = Object.assign(this.requestParam, resetParam);
        this.getData()
      },
      handlePageChange (page) {
        this.requestParam.page = page
        this.getData()
      },
      handleSizeChange(page_size){
        this.requestParam.page_size=page_size;
        this.getData()
      },
      getData () {
        if(this.requestParam.timeValue){
        let moment = require('moment');
        let t1=moment(this.requestParam.timeValue[0]).format('YYYY-MM-DD HH:mm:ss');
        let t2=moment(this.requestParam.timeValue[1]).format('YYYY-MM-DD HH:mm:ss');
        this.requestParam.start_date=t1;
        this.requestParam.end_date=t2;
      }else{
        this.requestParam.start_date='';
        this.requestParam.end_date='';
      }
        BulkManageApi.getMaindataDepartment({
          params: this.requestParam
        }).then(res => {
          if (res.code === 0) {
            this.tableData = res.data
          }
        })
        console.log(this.tableData);
      },
      deleteProject () {
        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
  
          })
          .catch(() => {
  
          });
      },
      details(row){
        this.$router.push({
          name:'主数据池部门详情',
          params:{
            requestParam:row
          }
        })
      }
    },
    created () {
  
    },
    mounted () {
      this.getData()
    },
  };
  </script>
  
  <style scoped lang="scss" >
   /deep/ .el-range-separator{
    width: 12% !important;
}
/deep/ .el-date-editor--datetimerange.el-input__inner{
  width: 258px;
}
  .maindataDepartment{
      width: 100%;
      padding: 20px;
      .two_row .el-form .time .el-form-item .el-form-item__content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .el-input{
            width: 80px;
            height: 100%;
        }
      }
      .three_row{
          width: 100%;
          margin-bottom: 20px;
          .el-col{
              width: 100%;
              display: flex;
              justify-content:flex-end;
              align-items: center;
          }
         
      }
  }
  
  </style>
  